<template>
    <section>
        <header>
            <p @click="out">&lt;</p>
        </header>
        <div  class="middle"   v-for="item in msg" :key="item.index">
            <p >{{item}}</p>
        </div>
        <footer>
            <input type="text" placeholder="请输入您的问题" v-model="val" >
            <p @click="send">发送</p>
        </footer>
    </section>
</template>

<script>
import {mapState, mapGetters} from 'vuex'
export default {
    data(){
        return { val:"",}
    },
    methods:{
        out(){
            this.$router.back(-1)
        },
        send(){
            
         
          this.$store.dispatch('pre/msg',this.val);
          
          this.val=""
      },
    },
     mounted() {
    this.$store.dispatch("main/setShowBtoNav", false);

  },
   computed: {
     ...mapState("pre", ["msg"]),
  },
}
</script>

<style scoped>
    .middle{width:100%;color:#fff;display:flex; margin-top:1.2rem;}
    .middle>p{width:60%;min-height:0.8rem;background:green;float:right;
    margin:0.1rem 0 0 3rem ;border-radius: 0.2rem;padding:0.1rem;word-wrap: break-word}
    header{width:100%;height:1.2rem;background:orange;}
    header>p{font-size:0.5rem;padding-left:0.5rem;line-height:1.2rem}
    footer{display:flex;width:100%;height:1rem;border-top:1px solid #000;position:fixed;bottom:0;left:0;background:#fff;
    display:flex;align-items: center;justify-content: space-around;}
    footer>input{width:80%;height:0.8rem;margin-left:0.1rem}
    footer>p{width:15%;height:0.7rem;background:#f6603f;border-radius:0.2rem;font-size:0.3rem;color:#fff;line-height:0.7rem;text-align:center}
</style>